<template>
  <div>
    <div class="list-page flex-column">
      <ListTable class="flex-1 overflow-auto" :tableList="tableList"  tableName="recording" />
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Provide, Vue } from 'vue-property-decorator'
import SearchLine from '@/components/SearchLine.vue'
import ListTable from '@/components/ListTable.vue'
import { getLogs } from '@/api'

/**
 * @Component 注解
 *    包含components属性，将组件SearchLine传递传递到父类的Vue的属性中
 */

@Component({
  components: {
    SearchLine,
    ListTable,
  },
})
export default class List extends Vue {
  @Provide() tableList: Array<object> = []

  created() {
    this.search()
  }

  search() {
    let phone = this.$route.query.phone
    getLogs({ phone }).then((res: any) => {
      this.tableList = res.data
    })
  }
}
</script>
<style lang="scss" scoped>
.list-page {
  margin: 20px auto;
  padding: 20px;
  width: 1300px;
  height: calc(100% - 40px);
  background: #fff;
}
</style>
